<template>
  <div class="home">
    <div class="top_time center">
      <div class="look_me">
        <button class="top_bt click_bt" @click="lookme">看Me</button>
      </div>
      <div class="choose_time">
        <input class="top_bt" id="now_time" type="date" />
      </div>
      <div class="look_ta">
        <button class="top_bt click_bt" @click="lookta">看Ta</button>
      </div>
    </div>
    <div class="task_content center">
      <div class="add_task tag_tanchuang">
        <AddTask :show.sync="addShowFlag" />
        <EditTask
          :show.sync="editingFlag"
          :task_data="EditTasks"
          @editDone="editDoneFn"
        />
      </div>
      <Task
        ref="taskfn"
        :null_lover.sync="null_lover"
        :isEdit="editFlag"
        @editing="isEditing"
      />
    </div>
    <div class="bottom center">
      <div class="look_me">
        <button class="top_bt click_bt" @click="edit">编辑</button>
      </div>
      <div class="look_me">
        <button class="top_bt click_bt" @click="look_history">历史</button>
      </div>
      <div class="look_me">
        <button class="top_bt click_bt" @click="openAdd">添加任务</button>
      </div>
      <div class="look_me">
        <button class="top_bt click_bt" @click="logout">登出</button>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import Task from "@/components/Task.vue";
import AddTask from "@/components/AddTask.vue";
import EditTask from "@/components/EditTask.vue";

export default {
  components: { Task, AddTask, EditTask },
  name: "Home",
  inject:["reload"],
  data() {
    return {
      addShowFlag: false,
      null_lover: false,
      editFlag: false,
      editingFlag: false,
      EditTasks: {},
      EditTasksChanged: false,
    };
  },
  computed: {},
  methods: {
    look_history(){
      this.$refs.taskfn.task_LookHistroy()
    },
    editDoneFn() {
      if (this.EditTasksChanged) {
        console.log("准备更新，")
        var url = this.HOME + "/update_task";
        let token = localStorage.getItem("token");
        this
          .$axios({
            method: "post", //指定请求方式
            url: url, //请求接口（相对接口，后面会介绍到）
            data: {
              token: token,
              taskId:this.EditTasks["taskId"],
              taskTitle: this.EditTasks["taskTitle"],
              taskContent: this.EditTasks["taskContent"],
              startTime: this.EditTasks["startTime"],
              deadLine: this.EditTasks["deadLine"],
            },
          })
          .then((res) => {
            this.$message.success({
              message: res["data"]["msg"],
              showClose: true,
            });
            //console.log(res["data"]);
            this.reload()
          })
          .catch((err) => {
            this.$message.warning({ message: err, showClose: true });
            this.reload()
          });
      }
    },
    isEditing(taskRs) {
      let task = {};
      task = Object.assign(task, taskRs);
      task["startTime"] = this.$moment(new Date(task["startTime"]))
        .format("YYYY-MM-DD HH:mm")
        .replace(/\s/, "T");
      task["deadLine"] = this.$moment(new Date(task["deadLine"]))
        .format("YYYY-MM-DD HH:mm")
        .replace(/\s/, "T");
      //console.log('当前点击task',task)
      this.EditTasks = task;
      this.editingFlag = true;
      let uw = this.$watch(
        "EditTasks",
        () => {
          //console.log(val, oldval);
          this.EditTasksChanged = true;
          uw()
          //this.reload()
        },
        {
          deep: true,
        }
      );
    },
    openAdd() {
      if (this.addShowFlag) {
        this.addShowFlag = false;
      } else {
        this.addShowFlag = true;
      }
    },
    edit() {
      if (this.editFlag) {
        this.editFlag = false;
        this.editingFlag = false;
      } else {
        this.editFlag = true;
      }
    },
    lookme() {
      this.$refs.taskfn.Task_lookme();
    },
    lookta() {
      if (!this.null_lover) {
        this.$refs.taskfn.Task_lookta();
      } else {
        this.$message.warning({ message: "无伴侣信息", showClose: true });
      }
    },
    logout() {
      if (localStorage.getItem("token") != null) {
        localStorage.removeItem("token");
      }
      this.$router.push({
        name: "Login",
      });
    },
  },
  mounted: function () {
    var time = new Date();
    var day = ("0" + time.getDate()).slice(-2);
    var month = ("0" + (time.getMonth() + 1)).slice(-2);
    var today = time.getFullYear() + "-" + month + "-" + day;
    document.querySelector(".choose_time .top_bt").value = today;
  },
};
</script>
<style>
.tag_tanchuang {
  position: absolute;
  top: 150px;
  width: 80%;
  left: 10%;
  height: fit-content;
  background-color: rgba(199, 194, 186, 0.9);
  border: 0px solid red;
  border-radius: 5%;
}
</style>
<style scoped>
* {
  margin: 0;
  padding: 0;
  font-family: ShouXie;
}
.home {
  height: 89vh;
  display: flex;
  flex-direction: column;
  margin: 1vh 0;
  border: 5px solid rgb(165, 164, 164);
  border-radius: 4%;
}
/* div{
  border: 2px solid red;
} */
.center {
  width: 100%;
  margin: 0 auto;
}
.top_time,
.bottom {
  flex-grow: 1;
  height: 45px;
  display: flex;
  flex-direction: row;
}
.task_content {
  flex-grow: 18;
  height: 72vh;
  /* overflow-y: scroll; */
}
.look_me,
.look_ta {
  flex-grow: 1;
  margin: auto 0;
  height: 72%;
}
.choose_time {
  flex-grow: 1.2;
  margin: auto 0;
}
.look_me .top_bt,
.look_ta .top_bt {
  width: 75%;
  margin: auto 0;
  height: 100%;
  border: 3px solid rgba(72, 139, 170, 1);
  border-radius: 23%;
  font-size: 18px;
  font-family: ShouXie;
  color: rgba(8, 9, 10, 0.88);
}

.choose_time .top_bt {
  /* max-width: fit-content; */
  margin: auto 0;
  height: 100%;
}
</style>